<#include "header1.ftl"/>
<style>
    .login{
        padding: 0;
        height: 50px;
        background: #5a84fd;
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        box-shadow: 0 5px 30px rgba(0,66,255,.3);
        border: 1px solid transparent;
    }
    .form-control{
        height: 40px !important;
    }
</style>
<#include "header2.ftl"/>
<div class="main" style="margin-top: 20px;">
    <div class="container">
        <ul class="breadcrumb" id="categoryName">
            <li class="active">用户注册</li>
        </ul>
        <div class="row margin-bottom-40">

            <div id="myOrderDiv" class="col-md-12 col-sm-12">
                <div id="myOrderDiv" class="col-md-6 col-sm-6 col-md-offset-3 col-sm-offset-3"  >
                <form id="register-form">
                    <div class="form-group">
                        <label for="email-login"><span style="color:red">*</span>用户名</label>
                        <input type="text" id="userName" name="userName" class="form-control" placeholder="请输入用户名" onblur="checkUserNameExist()">
                    </div>
                    <div class="form-group">
                        <label for="password-login"><span style="color:red">*</span>密码</label>
                        <input type="password" id="userPwd" name="userPwd" class="form-control" placeholder="请输入密码，最少6位数">
                    </div>
                    <div class="form-group">
                        <label for="password-login"><span style="color:red">*</span>确认密码</label>
                        <input type="password" id="userPwd2" name="userPwd2" class="form-control" placeholder="请确认密码">
                    </div>
                    <div class="form-group">
                        <label for="password-login"><span style="color:red">*</span>邮箱</label>
                        <input type="button" class="btn btn-success" value="发送验证码" id="sendCodeBtn" style="float: right;margin-top: 5%;height: 39px;"  onclick="sendCode()">
                        <input type="text" id="email" name="email" class="form-control" placeholder="请输入邮箱" style="width:75%">

                    </div>
                    <div class="form-group">
                        <label for="password-login"><span style="color:red">*</span>验证码</label>
                        <input type="text" id="code" name="code" class="form-control" placeholder="请输入验证码">
                    </div>
                    <div class="form-group">
                        <label for="password-login"><span style="color:red">*</span>手机</label>
                        <input type="text" id="phone" name="phone" class="form-control" placeholder="请输入手机号码">
                    </div>
                    <div class="padding-top-20">
                        <button class="col-md-12 login" type="button" id="registerButton">注册</button>
                    </div>
                </form>
            </div>
            </div>

        </div>
    </div>
    <!-- END CONTENT -->
</div>
<#include "footer1.ftl"/>
<script>
    function sendCode() {
        var email = $("#email").val();
        if (email == ''){
            layer.msg('请输入邮箱');
            return;
        }
        if (!/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(email)){
            layer.msg('请输入有效的邮箱地址');
            return;
        }

        $.post('/member/sendVerificationCode',{email:email,findPassword:"false"},function (data) {
            if (data.success){
                layer.msg('验证码已发送');
                countDown();
            } else{
                if (data.message){
                    layer.msg(data.message);
                    $("#email").focus();
                } else{
                    layer.msg('验证码发送失败');
                }
            }
        })
    }

    var count = 60;
    var t;
    function countDown(){
        if (count == 0) {
            $("#sendCodeBtn").attr("disabled",false);
            $("#sendCodeBtn").val("获取验证码");
            count = 60;
            clearTimeout(t);
            return;
        }
        $("#sendCodeBtn").attr("disabled", true);
        $("#sendCodeBtn").val("重新发送(" + count + ")");
        count--;
        t = setTimeout(function() {countDown() },1000)
    }

    function checkUserNameExist(){
        var userName = $("#userName").val();
        $.post('/member/checkUserNameRegister',{userName:userName},function (data) {
            if (!data.success){
                layer.msg(data.message);
                $("#userName").focus();
            }
        })
    }


    $("#registerButton").on('click',function () {
        var userName = $("#userName").val();
        var userPwd = $("#userPwd").val();
        var userPwd2 = $("#userPwd2").val();
        var email = $("#email").val();
        var code = $("#code").val();
        var phone = $("#phone").val();

        if (userName == ''){
            layer.msg('请输入用户名');
            return;
        }
        if (userPwd == ''){
            layer.msg('请输入密码');
            return;
        }
        if (userPwd.length < 6){
            layer.msg('密码长度不能少于6位');
            return;
        }
        if (userPwd2 == ''){
            layer.msg('请确认密码');
            return;
        }
        if (userPwd2 != userPwd){
            layer.msg('两次输入密码不一致');
            return;
        }
        if (email == ''){
            layer.msg('请输入邮箱');
            return;
        }
        if (!/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(email)){
            layer.msg('请输入有效的邮箱地址');
            return;
        }
        if (code == ''){
            layer.msg('请输入验证码');
            return;
        }
        if (phone == ''){
            layer.msg('请输入手机号码');
            return;
        }

        if (!((phone.length == 11 && /^1[3456789]\d{9}$/.test(phone))|| (phone.length == 8 && /^(5|6|8|9)\d{7}$/.test(phone)))) {
            layer.msg('请输入有效的手机号码');
            return;
        }

        var index = layer.load(3);
        $.post('/member/register',{userName:userName,userPwd:userPwd,email:email,verificationCode:code, phone:phone},function (data) {
            layer.close(index);
            if (data.success){
                clearTimeout(t);
                layer.msg("注册成功");
                $("#goodsDiv").load('/member/toLogin');
            } else{
                layer.msg(data.message);
            }
        })
    })



</script>
<#include "footer2.ftl"/>
